﻿@page "/"
@using AntDesign.Charts
@using Title = AntDesign.Charts.Title
@inject IApiGateway iApiGateway
@inject INodeService iNodeService
@inject ILogGateway iloggateway
@inject IToolCenter iToolCenter

<div class="main-content">
    <div class="row"  >
        <div class="col-xl-5">
            <div class="row" style="height:100%;width: 122%;">
                <div class="col-lg-s6">
                    <div class="cardzxs widget-flat">
                        <div class="card-body">
                            <div class="float-right" style="margin: 10%;">
                                <i class="mdi mdi-account-multipleday widget-icon">

                                </i>
                            </div>
                            <h5 class="text-muted font-weight-normal mt-0" style="font-weight:600;font-size: 20px;" title="Number of Customers">
                                日活跃用户
                            </h5>
                            <div class="mt-3 mb-3">
                                <span id="activeUserDay"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-s6">
                    <div class="cardzxs widget-flat">
                        <div class="card-body">
                            <div id="sxtu" style="width: 100%;height:132px;float: left;z-index: 1;position: relative;"></div>
                           @* <div class="float-right">
                                <i class="mdi mdi-account-multiplekhd widget-icon">

                                </i>
                            </div>*@
                           @* <h5 class="text-muted font-weight-normal mt-0" title="Number of Customers">
                                客户端环境
                            </h5>*@
                            @*<h3 class="mt-3 mb-3">
                                123
                            </h3>*@
                        </div>
                    </div>
                </div>
                <div class="col-lg-s6">
                    <div class="cardzxs widget-flat">
                        <div class="card-body">
                            <div id="sxtulx" style="width: 100%;height:132px;float: left;z-index: 1;position: relative;"></div>
                         @*   <div class="float-right">
                                <i class="mdi mdi-account-multiplelx widget-icon">

                                </i>
                            </div>
                            <h5 class="text-muted font-weight-normal mt-0" title="Number of Customers">
                                客户端类型
                            </h5>
                            <h3 class="mt-3 mb-3">
                                123
                            </h3>*@
                        </div>
                    </div>
                </div>
                <div class="col-lg-s6">
                    <div class="cardzxs widget-flat">
                        <div class="card-body">
                            <div class="float-right"  style="margin: 10%;">
                                <i class="mdi mdi-account-multiplezx widget-icon">

                                </i>
                            </div>
                            <h5 class="text-muted font-weight-normal mt-0" style="font-weight:600;font-size: 20px;" title="Number of Customers">
                                在线用户
                            </h5>
                          <div class="mt-3 mb-3">
                                <span id="onlineUser"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-sm-6 col-xl-8">
            <div class="cardS">
                <div class="card-body">
                    <h5 class="card-title"></h5>
                    <div id="zhextu" style="width: 99%;height:89%"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-xl-8">
            <div class="cardSs">
                <div class="card-body" style="overflow: hidden;">
                    <div class="map-container" id="mainmap" style="width: 100%;height:450px; margin:0 auto; margin-left:-10%;"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-5">
            <div class="row" style="height:100%;width: 159%;">
                <div class="col-lg-s6">
                    <div class="cardzxs widget-flat">
                        <div class="card-body">
                            <div  class="float-right" id="ybp"  style="width: 90%;height:150px;position: absolute;">

                            </div>
                            @*<div class="float-right">
                                <i class="mdi mdi-account-multiple widget-icon">

                                </i>
                            </div>
                            <h5 class="text-muted font-weight-normal mt-0" title="Number of Customers">
                                故障率
                            </h5>
                            <h3 class="mt-3 mb-3">
                                123
                            </h3>*@
                        </div>
                    </div>
                </div>
                <div class="col-lg-s6">
                    <div class="cardzxs widget-flat">
                        <div class="card-body">
                            <div class="float-right" id="yztzdtu" style="width: 90%;height:200px;position: absolute;">

                            </div>
                            @*<div class="float-right">
            <i class="mdi mdi-account-multiple widget-icon">

            </i>
        </div>
        <h5 class="text-muted font-weight-normal mt-0" title="Number of Customers">
            有状态平均响应时间
        </h5>
        <h3 class="mt-3 mb-3">
            123
        </h3>*@
                        </div>
                    </div>
                </div>
                <div class="col-lg-s6">
                    <div class="cardzxs widget-flat">
                        <div class="card-body">
                            <div class="float-right" id="wztzdtu" style="width: 90%;height:200px;position: absolute;">

                            </div>
                            @*<div class="float-right">
            <i class="mdi mdi-account-multiple widget-icon">

            </i>
        </div>
        <h5 class="text-muted font-weight-normal mt-0" title="Number of Customers">
            无状态平均响应时间
        </h5>
        <h3 class="mt-3 mb-3">
            123
        </h3>*@
                        </div>
                    </div>
                </div>
                <div class="col-lg-s6">
                    <div class="cardzxs widget-flat">
                        <div class="card-body">
                            <div class="float-right" id="statezb" style="width: 90%;height:200px;position: absolute;">

                            </div>
                            @*<div class="float-right">
                                <i class="mdi mdi-account-multiple widget-icon">

                                </i>
                            </div>
                            <h5 class="text-muted font-weight-normal mt-0" title="Number of Customers">
                                有状态函数与无状态函数占比
                            </h5>
                            <h3 class="mt-3 mb-3">
                                123
                            </h3>*@
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="row">

        <div style="height: 227px;width:30%">
            <div>
                <div class="col-lg-6">
                    <div class="cardtable">

                        <div class="card-header d-flex align-items-center" style="border-radius: 1.25rem 1.25rem 0 0;color: #151414;line-height: 26px;padding-top: 4px;background-color: #ffffff;">
                            <h3 class="h4">Service Node</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table" id="datas">
                                    <thead class="theadtr">
                                        <tr>

                                            <th>Ip</th>
                                            <th>Memory</th>
                                            <th>CPU</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @*@foreach (var item in this.data)
                                            {
                                                <tr>
                                                    <td>@item.IP</td>
                                                    <td>@item.Status</td>
                                                    <td>@(Math.Round(double.Parse(item.CPU?.TrimEnd('%') ?? "0"),2))</td>
                                                </tr>
                                            }*@
                                        @*<tr id="template">
                                                <td  id="IP"></td>
                                                <td  id="Status"></td>
                                                <td  id="CPU"></td>
                                            </tr>*@
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="height: 227px;width:33%">
            <div>
                <div class="col-lg-6">
                    <div class="cardtable">

                        <div class="card-header d-flex align-items-center" style="border-radius: 1.25rem 1.25rem 0 0;color: #151414;line-height: 26px;padding-top: 4px;background-color: #ffffff;">
                            <h3 class="h4">服务器实例</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table" id="tableservice">
                                    <thead class="theadtr">
                                        <tr>


                                            <th>Title</th>
                                            <th>Cpu</th>
                                            <th>Memory</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 227px;width:33%">
            <div>
                <div class="col-lg-6">
                    <div class="cardtable">

                        <div class="card-header d-flex align-items-center" style="border-radius: 1.25rem 1.25rem 0 0;color: #151414;line-height: 26px;padding-top: 4px;background-color: #ffffff;">
                            <h3 class="h4">故障率高的函数</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table" id="fungzl">
                                    <thead class="theadtr">
                                        <tr>

                                            <th>requestModuleName</th>
                                            <th>requestFunctionName</th>
                                            <th>runCount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                       @* <tr>
                                            <td>Function/user</td>
                                            <td>100</td>
                                            <td>20s</td>
                                        </tr>
                                        <tr>
                                            <td>Function/user</td>
                                            <td>20</td>
                                            <td>30s</td>
                                        </tr>
                                        <tr>
                                            <td>Function/user</td>
                                            <td>30</td>
                                            <td>20s</td>
                                        </tr>
                                        <tr>
                                            <td>Larry</td>
                                            <td>the Bird</td>
                                            <td>zhangsna</td>
                                        </tr>
                                        <tr>
                                            <td>Larry</td>
                                            <td>the Bird</td>
                                            <td>zhangsna</td>
                                        </tr>*@
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<style>
    .main-content{
    overflow-y:auto; overflow-x:hidden; height:100%;width:100%;
    padding: 12px 2px;
    }
    main{
    padding: 0 !important;
    margin-top: 0 !important;
}
h3.h4{
width:100%;
margin: 0 0 6px 0;
}

tr{
    text-align: center;
}

</style>




@code{
    int count = 110;
    List<LogFunction> forecasts = new List<LogFunction>();
    List<Node> data=new List<Node>();
    WindowsHelper windows;
    Core.DataAccess.Model.Pagination pagination = new Core.DataAccess.Model.Pagination
    {
        page = 1,
        rows = 7
    };
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            windows = new WindowsHelper(jSRuntime, iNodeService);
            var path = await this.windows.GetPathAsync();
            if (!await this.iToolCenter.IsAvailableClouds() && path == "/")
            {
                this.navigationManager.NavigateTo("/servers");
            }
            else
            {
                this.data = await this.iNodeService.GetNodes(pagination);
                await windows.HideLoadingAsync();
                await windows.SetTitleAsync();
                await windows.CreateMap();
                await windows.UserCount(this.data);
            }
        }
    }
    #region 示例1

    readonly LiquidConfig config1 = new LiquidConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "日活跃用户"
        },
        Min = 0,
        Max = 10000,
        Value = 5639,
        Width=266,
        Height=185,
    };

    #endregion 示例1

    #region 示例2

    readonly LiquidConfig config2 = new LiquidConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "水波图"
        },
        Description = new Description
        {
            Visible = true,
            Text = "水波图 - 百分比显示"
        },
        Min = 0,
        Max = 10000,
        Value = 5639,
        Statistic = new LiquidStatisticStyle
        {
            //Formatter
        }
    };

    #endregion 示例2
    //public async Task<List<LogGateway>> GetForecastAsync()
    //{
    //    var result = await iloggateway.GetGateway(pagination, this.txtValue, this.startdate, this.enddate);

    //    return result;

    //}
}


